<template>
    <div class="pdToday">
      <noice v-if="this.qbIsShow[0]"></noice>
      <div class="pdToday_top">
        <div class="topSubfield">
          <img src="./icons/head-back.png" alt="" @click="back">
          <div class="pdToday_title" >
          </div>
          <img src="./icons/more.png" alt="" @click="PopUpWindows">
        </div>
        <ul>
          <li v-for="(item, key) in todayList"
              :key = key
              @click="today(item.slot, key)"
          >{{item.title}}</li>
        </ul>
        <div class="limited">
          <div class="lim_til">{{this.todayList[this.index].subhead[0]}} </div>
          <p>{{this.todayList[this.index].subhead[1]}} <span>14</span> : <span>31</span> : <a>16</a> </p>
        </div>
      </div>
      <router-view></router-view>
    </div>
</template>

<script>
  import noice from './noice/noice'
    export default {
        name: "pd_today",
      data(){
          return{
            todayList:[
              {title:'火爆拼团中', subhead:['好货有限 赶紧下单呦','距结束'],slot:'/index/PD-today/underway'},
              {title:' 明日预告', subhead:['好拼团提前看','距开始'], slot:'/index/PD-today/tomorrow'}],
            index: 0,
            qbIsShow:[false,true]
          }
      },
      methods:{
        back(){
          this.$router.push({path:'/index/auth'});
        },
        today(path,key){
          this.$router.push({path:path});
          this.index = key;
        },
        PopUpWindows(){

        },
      },
      components:{
          noice
      }
    }
</script>

<style scoped lang="scss">
.pdToday{
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  overflow: hidden;
  .pdToday_top{
    padding: 10px 20px;
    height: 550px;
    background: url("./icons/banner.png") no-repeat 0 0;
    background-size: 100% 90%;
    .topSubfield{
      height: 120px;
      display: flex;
      img{
        width: 100px;
        height: 95px;
      }
      .pdToday_title{
        flex: 1;
        background: url("./icons/head-logo.png") no-repeat center center;
        background-size: 290px 90px;
      }
    }
    ul{
      list-style: none;
      margin: 60px 130px 100px;
      padding: 0;
      color: #fff;
      display: flex;
      li{
        flex: 1;
        text-align: center;
      }
    }
    .limited{
      margin: 0 40px;
      padding: 20px;
      height: 200px;
      border-radius: 30px;
      display: flex;
      line-height: 200px;
      background: white;
      .lim_til{
        background: url("./icons/flash.png") no-repeat 30px center;
        background-size: 60px 60px;
        font-size: 45px;
        text-indent: 105px;
        color: #333;
        flex: 1;
      }
      p{
        margin: 0;
        color: #9c9c9c;
        span{
          background: #000;
          color: white;
          border-radius: 10px;
          padding: 3px;
        }
        a{
          background: orangered;
          color: white;
          border-radius: 10px;
          padding: 3px;
        }
      }
    }
  }
}
</style>
